<template>
   <div >
     <div class="app4">
       <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
       <el-dialog title="新增用户数据" :visible.sync="dialogFormVisible">
         <el-form :model="form">
           <el-form-item label="登录账户名" :label-width="formLabelWidth">
             <el-input v-model="form.accountName" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="密码" :label-width="formLabelWidth">
             <el-input v-model="form.password" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="姓名" :label-width="formLabelWidth">
             <el-input v-model="form.userName" autocomplete="off"></el-input>
           </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="头像" :label-width="formLabelWidth">
              <el-upload
                class="avatar-uploader"
                action="http://zhump.com.net/famliy/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
           <el-button type="primary" @click="onSubmit">确 定</el-button>
         </div>
       </el-dialog>
     </div>
     <div id = "app5">
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="id" label="编号" width="180"> </el-table-column>
       	<el-table-column prop="userName" label="用户名" width="180"> </el-table-column>
       	<el-table-column prop="age" label="年龄" width="180"> </el-table-column>
       	<el-table-column prop="imageUrl" label="头像" width="180">
          <template slot-scope="scope">
                 <img :src="scope.row.imageUrl" min-width="70" height="70"/>
         </template>
          </el-table-column>
       	<el-table-column prop="phone" label="手机号" width="180"> </el-table-column>
       	<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
       	<el-table-column prop="updateTime" label="更新时间"  width="180"> </el-table-column>
       	<el-table-column  label="操作">
          <template slot-scope="scope">
       			<el-button type="primary" icon="el-icon-edit" circle @click="updateDalog(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteDalog(scope.row)"></el-button>
          </template>
       	</el-table-column>

       </el-table>
     </div>
     <!--编辑-->
     <el-dialog title="编辑用户数据" :visible.sync="updateDialogFormVisible">
       <el-form :model="form">
         <el-form-item label="姓名" :label-width="formLabelWidth">
           <el-input v-model="form.userName" autocomplete="off"></el-input>
         </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="http://www.tianzmp.com/famliy/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="updateDialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="updateOnSubmit">确 定</el-button>
       </div>
     </el-dialog>

     <!--分页-->
     <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[5,7,10,20,30]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="totalCount">
     </el-pagination>
   </div>
</template>

<script>
  import Vue from 'vue'

  export default{
    name:'app4',
    data() {
    	return {
    		tableData: [],
        dialogFormVisible: false,
        updateDialogFormVisible: false,
        items: [],
        userItems: [],
        currentPage: 1,
        pageSize: 7,
        totalCount: 0,
        imageUrl:'',
        id:'',
        form: {
            accountName:'',
            password:'',
        	  userName: '',
        	  phone: '',
            age:''
        	},
        	formLabelWidth: '120px'
    	}
    },
    mounted: function () {
      this.$http({
        method: 'post',
        url:'/user/page',
        headers:{
          "Authorization": sessionStorage.getItem('token')
        }
      }).then(res =>{
        var data = res.data.data.data;
        this.tableData = data;
        this.totalCount = res.data.data.totalCount;
      })
    },
    methods: {
      //分页
      getData(){
        let formData = new URLSearchParams();
        formData.append("pageIndex",this.currentPage);
        formData.append("pageSize",this.pageSize);
          // 这里使用axios，使用时请提前引入
          this.$http({
            method: 'post',
            url: '/user/page',
            headers:{
              "Authorization": sessionStorage.getItem('token')
            },
            data:formData
          }).then(reponse=>{
                // 将数据赋值给tableData
                this.tableData=reponse.data.data.data;
                // 将数据的长度赋值给totalCount
                this.totalCount=reponse.data.data.totalCount;
           })
      },
      handleSizeChange: function(val){
        this.pageSize = val;
        this.getData();
      },
      handleCurrentChange: function(val) {
        this.currentPage = val;
        this.getData()
      },
    	onSubmit: function () {
        let formData = new FormData;
        formData.append("name",this.form.userName);
        formData.append("phone",this.form.phone);
        formData.append("age",this.form.age);
        formData.append("imageUrl",this.imageUrl);
        formData.append("accountName",this.form.accountName);
        formData.append("pawssword",this.form.password);
        this.$http({
          method:'post',
          url:'user/insert',
          headers:{
            "Authorization": sessionStorage.getItem('token')
          },
          data:formData
        }).then(res =>{
          if (res.data.code === 200) {
            // 提交成功将要执行的代码
            this.dialogFormVisible = false;
            this.getData();
          }
        })
    	},
      handleAvatarSuccess(res, file) {
        //this.imageUrl = URL.createObjectURL(file.raw);
        this.imageUrl = res;
      },
      updateDalog: function (row){
        this.updateDialogFormVisible = true;
        this.form.id = row.id;
        this.form.age = row.age;
        this.form.userName = row.userName;
        this.imageUrl = row.imageUrl;
        this.form.phone = row.phone;
        this.id = row.id;
      },
      updateOnSubmit: function () {
      let formData = new FormData()
      formData.append('name', this.form.userName)
      formData.append('phone', this.form.phone)
      formData.append('age', this.form.age)
      formData.append('imageUrl', this.imageUrl)
      formData.append('id', this.id)
      this.$http({
        method: 'post',
        url: 'user/update',
        headers: {
          'Authorization': sessionStorage.getItem('token')
        },
        data: formData
      }).then(res => {
        if (res.data.code === 200) {
          this.updateDialogFormVisible = false
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          })
          this.getData()
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'success'
          })
        }
      })
    },
    deleteDalog: function (row) {
      this.$confirm(
        '此操作将永久删除数据是否继续',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.$http({
          method: 'delete',
          url: '/user/delete?id=' + row.id,
          headers: {
            'Authorization': sessionStorage.getItem('token')
          }
        })
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'success'
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
